<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/tooltip.css" />
		<link rel="stylesheet" href="js/Cesium/Widgets/widgets.css" />
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/Cesium/Cesium.js"></script>
		<script src="js/Cesiumtool/viewerCesiumNavigationMixin.js"></script>
		<script src="js/Cesiumtool/GlobeTooltip.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#contanter{
				width:100%;
				height:100%
			}    
			/* 去除logo信息 */	
			.cesium-widget-credits{ 
				display:none!important; 
				visibility:hide!important; 
			} 
			/* 导航条的位置 */
			.compass{
				left:0px;
				top:20px
			}
			.navigation-controls{
				left:30px;
				top:110px
			}
			
			/* 添加点、线、面的按钮*/
			.addEntities{
				position: fixed;
				left: 110px;
				top: 10px;
				z-index: 99999;
			}
			.addEntities button{
				background-color: rgba(47,53,60,0.8);
				color: #FFFFFF;
				border: 0;
				padding: 5px 15px;
				border-radius: 5px;
			}
		</style>
    </head>
    <body>
		<div id="contanter"></div>
		<!-- 添加实体 -->
		<div class="addEntities">
			<button onclick="drawPoint()">绘制点</button>
			<button onclick="drawPolyline()">绘制线</button>
			<button onclick="drawPolygon()">绘制面</button>
			<button onclick="clearEntities()">清除</button>
		</div>
		<script>
			var viewer = new Cesium.Viewer("contanter",{
				animation: false,  //是否显示动画控件
	            baseLayerPicker: false, //是否显示图层选择控件
	            geocoder: true, //是否显示地名查找控件
	            timeline: false, //是否显示时间线控件
	            sceneModePicker: true, //是否显示投影方式控件
	            navigationHelpButton: false, //是否显示帮助信息控件
	            infoBox: true,  //是否显示点击要素之后显示的信息
				// 加载地形数据
				// terrainProvider: new Cesium.CesiumTerrainProvider({
				// 	url: Cesium.IonResource.fromAssetId(3956)
				// })
			})
			
			// 显示导航条	        
			viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
			
			var tooltip = new GlobeTooltip(viewer.container);	
			var scene = viewer.scene;
			// 绘制点
			function drawPoint(){
				// 创建鼠标事件
				var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
				// 鼠标移动事件
				handler.setInputAction(function(movement) {
					tooltip.showAt(movement.endPosition, "<p>点击绘制点</p>")
				},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				// 左键
				handler.setInputAction(function(movement) {
					// console.log("左键",viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid))
					var position = getPosition(movement.position)
					if(position)
					viewer.entities.add({
						name: "点几何对象",
						position: position,
						point: {
							color: Cesium.Color.SKYBLUE,
							pixelSize: 10,
							outlineColor: Cesium.Color.YELLOW,
							outlineWidth: 3,
							disableDepthTestDistance: Number.POSITIVE_INFINITY
						}
					});
					tooltip.showAt(movement.position, "<p>移动继续点击绘制</p>")
				},Cesium.ScreenSpaceEventType.LEFT_CLICK);
				// 右键
				handler.setInputAction(function(movement) {
					
					handler.destroy();
					tooltip.setVisible(false)
					positions.pop();//最后一个点无效
				},Cesium.ScreenSpaceEventType.RIGHT_CLICK);
			}
			
			// 绘制线
			function drawPolyline(){
				// 点集合
				var positions = []
				// 创建鼠标事件
				var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
				// 鼠标移动事件
				handler.setInputAction(function(movement) {
					tooltip.showAt(movement.endPosition, "<p>点击绘制</p>")
					 // var newPosition1 = viewer.scene.pickPosition(movement.endPosition);
					 // console.log(newPosition1)
					 var newPosition = getPosition(movement.endPosition);	
					if(newPosition&&positions.length>0){
						tooltip.showAt(movement.endPosition, "<p>移动绘制下一点，右键结束绘制</p>")
						positions.pop();
						positions.push(newPosition);
					}
				},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				// 左键
				handler.setInputAction(function(movement) {
					// console.log("左键",viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid))
					var position = getPosition(movement.position)
				
					if(position){
						if(positions.length==0){
							positions.push(position)
							showPolyLine(positions)
						}
						positions.push(position)
						creatPoint(position)
					}	
					tooltip.showAt(movement.position, "<p>移动继续点击绘制</p>")
				},Cesium.ScreenSpaceEventType.LEFT_CLICK);
				// 右键
				handler.setInputAction(function(movement) {
					handler.destroy();
					tooltip.setVisible(false)
					positions.pop();//最后一个点无效
				},Cesium.ScreenSpaceEventType.RIGHT_CLICK);
			}
			// 绘制多边形
			function drawPolygon(){
				// 点集合
				var positions = []
				// 创建鼠标事件
				var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
				// 鼠标移动事件
				handler.setInputAction(function(movement) {
					tooltip.showAt(movement.endPosition, "<p>点击绘制</p>")
					 // var newPosition1 = viewer.scene.pickPosition(movement.endPosition);
					 // console.log(newPosition1)
					 var newPosition = getPosition(movement.endPosition);	
					if(newPosition&&positions.length>0){
						tooltip.showAt(movement.endPosition, "<p>移动绘制下一点，右键结束绘制</p>")
						positions.pop();
						positions.push(newPosition);
					}
				},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				// 左键
				handler.setInputAction(function(movement) {
					// console.log("左键",viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid))
					var position = getPosition(movement.position)
				
					if(position){
						if(positions.length==0){
							// creatPoint(position)
							positions.push(position)
							showPolygon(positions)
						}
						positions.push(position)
						creatPoint(position)
					}	
					tooltip.showAt(movement.position, "<p>移动继续点击绘制</p>")
				},Cesium.ScreenSpaceEventType.LEFT_CLICK);
				// 右键
				handler.setInputAction(function(movement) {
					console.log("右键")
					handler.destroy();
					tooltip.setVisible(false)
				},Cesium.ScreenSpaceEventType.RIGHT_CLICK);
			}
			// 清除所有
			function clearEntities(){
				
				viewer.entities.removeAll()
			}
			// 获取鼠标点击的坐标信息
			function getPosition(position){
				// var wp = event.position;
				if (!Cesium.defined(position)) {
				    return;
				}
				var ray = viewer.camera.getPickRay(position);
				if (!Cesium.defined(ray)) {
				    return;
				}
				var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
				if (!Cesium.defined(cartesian)) {
				    return;
				}
				return cartesian
			}
			
			// 绘制点
			function creatPoint(position){
				viewer.entities.add({
					name: "点几何对象",
					position: position,
					point: {
						color: Cesium.Color.SKYBLUE,
						pixelSize: 10,
						outlineColor: Cesium.Color.YELLOW,
						outlineWidth: 3,
						disableDepthTestDistance: Number.POSITIVE_INFINITY
					}
				});
			}
			// 动态绘制线
			function showPolyLine(positions){
				var dynamicPositions = new Cesium.CallbackProperty(function () {
				    return positions;
				}, false);
				
				var bData = {
				    polyline: {
				        positions: dynamicPositions,
				        clampToGround: true,
				        width: 8,
				        material:new Cesium.PolylineGlowMaterialProperty({
							glowPower: 0.25,
							color: Cesium.Color.fromCssColorString('#00f').withAlpha(0.9)
						})
				    }
				};
				viewer.entities.add(bData);
			}
			// 动态绘制多边型
			function showPolygon(positions){
				var dynamicPositions = new Cesium.CallbackProperty(function () {
					if (positions.length > 2) {
						var pHierarchy = new Cesium.PolygonHierarchy(positions);
						return pHierarchy;
					} else {
						return null;
					}
				}, false);
				if(dynamicPositions)
				viewer.entities.add({
					polygon: {
						hierarchy: dynamicPositions,
						material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
					}
				});
			}
		</script>
    </body>
</html>